<div style="display: none;" data-bind="visible: loginState.isUser">
    <div class="alert" data-bind="visible: isPrinting()">
        {{ _('Take note that timelapse configuration is disabled while your printer is printing.') }}
    </div>
    <h1>{{ _('Timelapse Configuration') }}</h1>

    <label for="webcam_timelapse_mode">{{ _('Timelapse Mode') }}</label>
    <select id="webcam_timelapse_mode" data-bind="value: timelapseType, enable: isOperational() && !isPrinting() && loginState.isUser()">
        <option value="off">{{ _('Off') }}</option>
        <option value="timed">{{ _('Timed') }}</option>
        <option value="zchange">{{ _('On Z Change') }}</option>
    </select>
    <span class="help-block" data-bind="visible: timelapseType() == 'zchange'"><span class="label label-warning">{{ _('Warning') }}</span> {{ _('Do not use with spiralized ("Joris") vases or similar continuous Z models.') }}</span>
    <span class="help-block" data-bind="visible: timelapseType() == 'zchange'"><span class="label label-info">{{ _('Note') }}</span> {% trans %}Does not work when printing from the printer's SD Card (no way to detect the change in Z reliably). Use "Timed" mode for those prints instead.{% endtrans %}</span>

    <label for="webcam_timelapse_fps">{{ _('Timelapse frame rate (in frames per second)') }}</label>
    <div class="input-append">
        <input type="text" class="input-mini" id="webcam_timelapse_fps" data-bind="value: timelapseFps, valueUpdate: 'afterkeydown', enable: isOperational() && !isPrinting() && loginState.isUser() && timelapseTypeSelected()">
        <span class="add-on">{{ _('fps') }}</span>
    </div>

    <label for="webcam_timelapse_postRoll">{{ _('Timelapse post roll (in rendered seconds)') }}</label>
    <div class="input-append">
        <input type="text" class="input-mini" id="webcam_timelapse_postRoll" data-bind="value: timelapsePostRoll, valueUpdate: 'afterkeydown', enable: isOperational() && !isPrinting() && loginState.isUser() && timelapseTypeSelected()">
        <span class="add-on">{{ _('sec') }}</span>
    </div>

    <div id="webcam_timelapse_timedsettings" data-bind="visible: intervalInputEnabled">
        <label for="webcam_timelapse_interval">{{ _('Interval') }}</label>
        <div class="input-append">
            <input type="text" class="input-mini" id="webcam_timelapse_interval" data-bind="value: timelapseTimedInterval, valueUpdate: 'afterkeydown', enable: isOperational() && !isPrinting() && loginState.isUser()">
            <span class="add-on">{{ _('sec') }}</span>
        </div>
    </div>

    <div data-bind="visible: loginState.isAdmin">
        <label class="checkbox">
            <input type="checkbox" data-bind="checked: persist"> {{ _('Save as default') }}
        </label>
    </div>

    <div>
        <button class="btn" data-bind="click: save, enable: saveButtonEnabled">{{ _('Save config') }}</button>
    </div>
</div>

<h1>{{ _('Finished Timelapses') }}</h1>

<div class="pull-right">
    <small>{{ _('Sort by') }}: <a href="javascript:void(0)" data-bind="click: function() { listHelper.changeSorting('name'); }">{{ _('Name') }} ({{ _('ascending') }})</a> | <a href="javascript:void(0)" data-bind="click: function() { listHelper.changeSorting('creation'); }">{{ _('Creation date') }} ({{ _('descending') }})</a> | <a href="javascript:void(0)" data-bind="click: function() { listHelper.changeSorting('size'); }">{{ _('Size') }} ({{ _('descending') }})</a></small>
</div>
<table class="table table-striped table-hover table-condensed table-hover" id="timelapse_files">
    <thead>
    <tr>
        <th class="timelapse_files_name">{{ _('Name') }}</th>
        <th class="timelapse_files_size">{{ _('Size') }}</th>
        <th class="timelapse_files_action">{{ _('Action') }}</th>
    </tr>
    </thead>
    <tbody data-bind="foreach: listHelper.paginatedItems">
    <tr data-bind="attr: {title: name}">
        <td class="timelapse_files_name" data-bind="text: name"></td>
        <td class="timelapse_files_size" data-bind="text: size"></td>
        <td class="timelapse_files_action"><a href="javascript:void(0)" class="icon-trash" data-bind="click: function() { if ($root.loginState.isUser()) { $parent.removeFile($data.name); } else { return; } }, css: {disabled: !$root.loginState.isUser()}"></a>&nbsp;|&nbsp;<a href="javascript:void(0)" class="icon-download" data-bind="attr: {href: url}"></a></td>
    </tr>
    </tbody>
</table>
<div class="pagination pagination-mini pagination-centered">
    <ul>
        <li data-bind="css: {disabled: listHelper.currentPage() === 0}"><a href="javascript:void(0)" data-bind="click: listHelper.prevPage">«</a></li>
    </ul>
    <ul data-bind="foreach: listHelper.pages">
        <li data-bind="css: { active: $data.number === $root.listHelper.currentPage(), disabled: $data.number === -1 }"><a href="javascript:void(0)" data-bind="text: $data.text, click: function() { $root.listHelper.changePage($data.number); }"></a></li>
    </ul>
    <ul>
        <li data-bind="css: {disabled: listHelper.currentPage() === listHelper.lastPage()}"><a href="javascript:void(0)" data-bind="click: listHelper.nextPage">»</a></li>
    </ul>
</div>

<div data-bind="visible: unrenderedListHelper.allSize">
    <div><small><a href="javascript:void(0)" class="muted" onclick="$(this).children().toggleClass('icon-caret-right icon-caret-down').parent().parent().parent().next().slideToggle('fast')"><i class="icon-caret-right"></i> {{ _('Unrendered Timelapses') }}</a></small></div>
    <div class="hide">
        <table class="table table-striped table-hover table-condensed table-hover" id="timelapse_unrendered">
            <thead>
            <tr>
                <th class="timelapse_unrendered_name">{{ _('Name') }}</th>
                <th class="timelapse_unrendered_count">{{ _('Frames') }}</th>
                <th class="timelapse_unrendered_size">{{ _('Size') }}</th>
                <th class="timelapse_unrendered_action">{{ _('Action') }}</th>
            </tr>
            </thead>
            <tbody data-bind="foreach: unrenderedListHelper.paginatedItems">
            <tr data-bind="attr: {title: name}">
                <td class="timelapse_unrendered_name" data-bind="text: name"></td>
                <td class="timelapse_unrendered_count" data-bind="text: count"></td>
                <td class="timelapse_unrendered_size" data-bind="text: size"></td>
                <td class="timelapse_unrendered_action"><a href="javascript:void(0)" title="{{ _('Delete unrendered timelapse') }}" class="icon-trash" data-bind="click: function() { if ($root.loginState.isUser()) { $parent.removeUnrendered($data.name); } else { return; } }, css: {disabled: !$root.loginState.isUser()}"></a>&nbsp;|&nbsp;<a href="javascript:void(0)" title="{{ _('Render timelapse') }}" class="icon-facetime-video" data-bind="click: function() { if ($root.loginState.isUser() && !$root.isBusy()) { $parent.renderUnrendered($data.name); } else { return; } }, css: {disabled: !$root.loginState.isUser() || $root.isBusy()}"></a></td>
            </tr>
            </tbody>
        </table>
        <div class="pagination pagination-mini pagination-centered">
            <ul>
                <li data-bind="css: {disabled: unrenderedListHelper.currentPage() === 0}"><a href="javascript:void(0)" data-bind="click: unrenderedListHelper.prevPage">«</a></li>
            </ul>
            <ul data-bind="foreach: unrenderedListHelper.pages">
                <li data-bind="css: { active: $data.number === $root.unrenderedListHelper.currentPage(), disabled: $data.number === -1 }"><a href="javascript:void(0)" data-bind="text: $data.text, click: function() { $root.unrenderedListHelper.changePage($data.number); }"></a></li>
            </ul>
            <ul>
                <li data-bind="css: {disabled: unrenderedListHelper.currentPage() === unrenderedListHelper.lastPage()}"><a href="javascript:void(0)" data-bind="click: unrenderedListHelper.nextPage">»</a></li>
            </ul>
        </div>
    </div>
</div>
